<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <title>创建主题</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="keywords" content="">
  <meta name="description" content="">
  <th:block th:include="common/link::link"></th:block>
  <style>
    .flyapi-upload-img {
      position: relative;
      display: inline-block;
      border: 1px dashed #e2e2e2;
      background-color: #fff;
      text-align: center;
      cursor: pointer;
      color: #999;
      width: 100px;
      height: 140px;
    }
  </style>
</head>
<body>
<div class="header">
  <th:block th:include="common/header::header"></th:block>
</div>

<div class="main fly-user-main layui-clear">
  <th:block th:include="common/left::left"></th:block>

  <div class="fly-panel fly-panel-user" pad20>


    <div class="layui-container">
      <div class="fly-panel">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
          <legend>新建/编辑主题</legend>
        </fieldset>
        <form class="layui-form layui-form-pane1" action="">
          <div class="layui-form-item">
            <label class="layui-form-label">主题</label>
            <div class="layui-input-block">
              <input type="hidden" name="subjectId" th:value="${subject} ? ${subject.subjectId}:''">
              <input type="text" th:value="${subject} ? ${subject.subjectTitle}:''" id="subjectTitle" name="subjectTitle" lay-verify="required|title" required placeholder="请输入主题" autocomplete="off" class="layui-input">
            </div>
          </div>
          <div class="layui-form-item" pane>
            <label class="layui-form-label">权限</label>
            <div class="layui-input-block" th:switch="${subject} ? ${subject.permissions} : '0'">
              <input type="checkbox" th:case="1" value="1" name="permissions" lay-skin="switch" lay-filter="switchTest" lay-text="公开|私密">
              <input type="checkbox" th:case="0" value="0" checked  name="permissions" lay-skin="switch" lay-filter="switchTest" lay-text="公开|私密">
            </div>
          </div>
          <div class="layui-form-item" pane>
            <label class="layui-form-label">封面</label>
            <div class="layui-input-block">
              <a class="layui-btn layui-btn-primary layui-btn-radius" href="javascript:void(0)" onclick="createCover()">自动生成</a>
              <a class="layui-btn layui-btn-primary layui-btn-radius" id="upload-btn">上传</a>
            </div>
          </div>
          <div class="layui-form-item" pane>
            <label class="layui-form-label">图片</label>
            <div class="layui-input-block">
              <div class="layui-upload">
                <div class="layui-upload-list">
                  <input type="hidden" id="cover" name="cover" th:value="${subject} ? ${subject.cover} : ''" lay-verify="required|cover">
                  <img class="flyapi-upload-img" src="../../static/images/default/cover-default.png"  th:src="${subject} ? ${subject.cover} : '../../static/images/default/cover-default.png'">
                  <a>建议尺寸：1 : 1.4</a>
                </div>
              </div>
            </div>
          </div>
          <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">简介</label>
            <div class="layui-input-block">
              <textarea placeholder="请输入内容" name="subjectDes" th:text="${subject} ? ${subject.subjectDes} : ''" lay-verify="required|subjectDes" class="layui-textarea"></textarea>
            </div>
          </div>
          <div class="layui-form-item">
            <div class="layui-input-block">
              <button class="layui-btn layui-btn-primary layui-btn-radius" lay-submit lay-filter="*">立即提交</button>
              <button type="reset" class="layui-btn layui-btn-primary layui-btn-radius">重置</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<script>

    var rootPath = '[[${rootPath}]]';

  function createCover() {
    var title = $("#subjectTitle").val();
      $.getJSON("../img/cover", {"subjectTitle":title}, function (result) {
          layer.msg(result.msg);
          $(".flyapi-upload-img").attr("src",result.data);
          $("#cover").val(result.data);
      },"json");
  }

    layui.use(['form','upload'], function(){
        var form = layui.form;
        var upload = layui.upload;
        //自定义验证规则
        form.verify({
            title: function(value){
                if(value.length < 5){
                    return '主题也太短了吧';
                }
            }
        });

        //监听提交
        form.on('submit(*)', function(data){
            $.post("../subject", jQuery.parseJSON(JSON.stringify(data.field)),
                function(result){
                    if(result.success){
                        layer.msg(result.msg);
                        location.href = rootPath + "/index.html";
                    }
                }, "json");

            return false;
        });

        upload.render({
            elem: '#upload-btn',
            accept:'images',
            field:'file',
            size: 5120,
            url: '../qiniu/common/upload',
            done: function(res){
                $(".flyapi-upload-img").attr("src",res.data);
                $("#cover").val(res.data);
            }
        });

    });

</script>

</body>
</html>